import React from 'react'
import './ProductItem.css'
import Button from '../Button/Button'

const ProductItem = ({product, className, onAdd}) => {
    const anAddHandler = () => {
        onAdd(product)
    }
    return (
        <div className={'product '+className}>
            <div className={'img'}/>
            <div className={'title'}>{product.title}</div>
            <div className={'discription'}>{product.discription}</div>
            <div className={'price'}>
                <span>Price: <b>{product.price}</b></span>
            </div>
            <Button className={'add-btn'} onClick={anAddHandler}>
                Add to cart
            </Button>
        </div>
    )
}

export default ProductItem